<template>
  <div ref="content" class="content">
    <div
      @click="clickPlay()"
      :style="playButtonStyle"
      class="play-button"
    ></div>
    <video
      :style="videoStyle"
      v-if="isShowVideo"
      ref="videoPlay"
      controls
      :src="videoUrl"
      autoplay="true"
    ></video>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  beforeRouteLeave(to, from, next) {
    // console.log("beforeRouteLeave", to, next);
    to.meta.keepAlive = true;
    next();
  },
  data() {
    return {
      videoUrl: "",
      isShowVideo: false,
      videoStyle: "",
      playButtonStyle: ""
    };
  },
  computed: {
    ...mapState(["lang", "userInfo"])
  },
  mounted() {
    console.log("this.$route.query.url");

    this.videoUrl = this.$route.query.url;
    console.log(this.videoUrl);

    var contentHeight = this.$refs.content.offsetHeight;
    var contentWidth = this.$refs.content.offsetWidth;
    console.log("contentHeight", contentHeight);
    console.log("contentWidth", contentWidth);

    var scale = contentWidth / 3840;
    var width = 1600 * scale;
    var height = (width * 9) / 16;
    var top = 125 * scale;
    this.videoStyle =
      "width:" +
      width +
      "px;height:" +
      height +
      "px;margin-left:auto;margin-right:auto;margin-top:" +
      top +
      "px;";

    var buttonTop = top + 90;
    var buttonLeft = (contentWidth - width) / 2;
    this.playButtonStyle =
      "width:" +
      width +
      "px;height:" +
      height +
      "px;top:" +
      buttonTop +
      "px;left:" +
      buttonLeft +
      "px;";
  },
  methods: {
    ...mapMutations(["isShowLogin"]),

    clickPlay() {
      if (!this.userInfo) {
        this.isShowLogin("show");
        return;
      }
      this.isShowVideo = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 90px);
  background-image: url(../../../../assets/imgs/foundation/video-back-pc.png);
  background-size: cover;
  text-align: center;
  .play-button {
    // background-color: #409eff;
    position: absolute;
  }
}
</style>
